<template>
  <div ref="chartDom"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let chartInstance = null;
onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    series: [
      {
        type: 'pie',
        data: [
          {value: 68.57, name: '工资总额'},
          {value: 26.90, name: '社保与公积金'},
          {value: 3.43, name: '福利费用'},
          {value: 1.10, name: '其他人工成本'}
        ],
        radius: '60%',
        label: {
          show: true,
          position: 'inside',
          // formatter: '{b}: {d}%'
          formatter: '{d}%'
        }
      }
    ]
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>